<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import {
  ElButton,
  ElDialog,
} from "element-plus";
import RadioGroup from "./RadioGroup.vue";
import CheckboxGroup from "./CheckboxGroup.vue";

const instance = (getCurrentInstance()) as any; // instance 相当于以前的 `this`

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  // 弹窗显示数据类型 0默认 1错误  2收藏
  dialogType: {
    type: Number,
    default: 0
  },
  list: {
    type: Array as any,
    default: () => [], 
  },
   collectIdList: {
    type: Array as any,
    default: () => []
  },
  showCorrectBtn: {
    type: Boolean,
    default: true
  }
})

const emits = defineEmits(['update:modelValue', 'addCollect']);

const showCorrect = ref<boolean>(true)

function HandleRest() {
    props.list.forEach((item:any) => { 
      item.val = item.question_style === 3 ? [] : ''
      item.error = false
    })
    scrollIntoRef(0)
}
function radioChange(value: string, item: any) { 
  item.error = value && item.correct_item !== item.val
}
function checkboxChange(value: [], item: any) { 
  item.error = value.sort().join() !== item.correct_item.sort().join()
}

function scrollIntoRef(index: number) {
  instance.refs[`d-item${index}`][0].scrollIntoView({ behavior: 'smooth' });
}
</script>

<template>
  <el-dialog v-model="props.modelValue" fullscreen :close-on-press-escape="false" :show-close="false"  >
    <template #header>
      <span class="font-700">{{`${props.dialogType === 1 ? '错题再练' : '我的 ✿ 　'}`}} </span>
      <el-button v-if="props.showCorrectBtn" type="primary" link @click="showCorrect = !showCorrect">{{ `${showCorrect ? '隐藏' : '显示'}` }}参考解析</el-button>
      <el-button type="primary" @click="emits('update:modelValue', false)"> 返 回 </el-button>
    </template>
      <div v-for="( item, index) in props.list" :ref="`d-item${index}`" >
        <RadioGroup v-if="item.question_style === 1" collectShow  :collectIdList="collectIdList"  :item="item" :index="index" @change="(value: any) => radioChange(value, item)" @addCollect="emits('addCollect', item.question_id)"/>
        <CheckboxGroup v-else-if="item.question_style === 3" collectShow :collectIdList="collectIdList"  :item="item" :index="index" @change="(value: any) => checkboxChange(value, item)" @addCollect="emits('addCollect', item.question_id)"/>
        <!-- <h2><SupportIcon /> 简答题</h2> -->
        <div v-else class="margin-b-15">
          <p class="font-700 title">
            {{ index+1 }}.{{item.title}}
            <img :src="item.title_thumb" />
            （{{item.fraction}}分）
            <span :class="['collect-icon', collectIdList.includes(item.question_id) ? 'red' : '']" 
              title="收藏" 
              @click="emits('addCollect', item.question_id)"
              >✿</span>
          </p>
          <p v-if="showCorrect">
            参考解析：<span>{{item.analysis}}</span>
            <span v-if="!item.analysis"><img :src="item.analyze_thumb" /></span>
          </p>
        </div>
      </div>
      <div v-if="props.list.length === 0" class="good">
        <img src="@/assets/ovation.gif" />做得好，继续保持
      </div>
      <div class="save-btn">
        <el-button v-if="props.list.length" type="success" @click="HandleRest()"> 重 做 </el-button>
        <el-button type="primary" @click="emits('update:modelValue', false)"> 返 回 </el-button>
      </div>
    </el-dialog>
</template>

<style good>
.good{
  text-align: center;
  font-size: 30px;
  color: rgb(249 10 170);
  padding-bottom: 50px;
}
.good img{
  width: 150px;
  /* vertical-align: text-bottom; */
}

</style>
